import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect, Route, Switch } from "react-router-dom";
//import { Button, Layout } from 'antd';
import { Layout } from "antd";
import { deleteUserinfo } from "../../redux/actions/login_action"
//import { reqCategoryList } from "../../api";
import "./css/admin.less"
import Header from "./header/header";
import LeftNav from "./left_nav/left_nav";
import Home from "../../components/home/home";
import Category from "../category/category";
import Product from "../product/product";
import ProductDetail from "../product/detail";
import ProductAddOrUpdate from "../product/add_update";
import User from "../user/user";
import Role from "../role/role";
import Bar from "../bar/bar";
import Line from "../line/line";
import Pie from "../pie/pie";
import Order from "../order/order";
import { saveTitle } from "../../redux/actions/menu_action";
import { getTitle } from "../../config/tools";
const { Footer, Sider, Content } = Layout;

@connect(
    state => ({ userInfo: state.userInfo }),
    {
        deleteUserinfo: deleteUserinfo,
        saveTitle: saveTitle
    })
class Admin extends Component {

    popStateListener = () => {
        let title = getTitle(this.props.location.pathname);
        this.props.saveTitle(title);
    }

    componentDidMount() {
        window.addEventListener("popstate", this.popStateListener);
    }

    componentWillUnmount() {
        window.removeEventListener("popstate", this.popStateListener);
    }

    render() {
        const { isLogin } = this.props.userInfo;
        if (!isLogin) {
            return <Redirect to="/login" />
        } else {
            return (
                <Layout className="admin">
                    <Sider className="sider">
                        <LeftNav />
                    </Sider>
                    <Layout>
                        <Header>Header</Header>
                        <Content className="content">
                            <Switch>
                                <Route path="/admin/home" component={Home} />
                                <Route path="/admin/products/category" component={Category} />
                                <Route path="/admin/products/product" component={Product} exact />
                                <Route path="/admin/products/product/detail/:id" component={ProductDetail} />
                                <Route path="/admin/products/product/add_update" component={ProductAddOrUpdate} exact />
                                <Route path="/admin/products/product/add_update/:id" component={ProductAddOrUpdate} />
                                <Route path="/admin/user" component={User} />
                                <Route path="/admin/role" component={Role} />
                                <Route path="/admin/charts/bar" component={Bar} />
                                <Route path="/admin/charts/line" component={Line} />
                                <Route path="/admin/charts/pie" component={Pie} />
                                <Route path="/admin/order" component={Order} />
                                <Redirect to="/admin/home" />
                            </Switch>
                        </Content>
                        <Footer className="footer">推荐使用chrome浏览器，获取最佳用户体验</Footer>
                    </Layout>
                </Layout>
            )
        }
    }
}

export default Admin;
